<template>
	<view class="bg">
		<u-navbar :is-back="true" title="新建分组" title-color="white" :background="background">
			<view class="navbar-right" slot="right">
				<view class="" style="margin-right: 20rpx;color: #FFFFFF;" @click="save()">
					保存
				</view>
			</view>
		</u-navbar>

		<view class="u-p-26 coBg u-m-b-26">
			<p>分组名称</p>
			<u-input v-model="value" :type="type" placeholder="请输入组名" :border="border" :clearable="false" />
		</view>
		<view class="u-p-26 coBg u-m-b-26" style="line-height: 60rpx;">
			分组患者<span style="color:#3b99ff;float: right;">
				<u-icon name="plus" size="24" style="border: 1px solid #3b99ff;border-radius: 50%;margin-right: 10rpx;">
				</u-icon>
				添加患者
			</span>
			<view v-for="(itemList,index) in userList" :key="index" class="u-flex u-p-t-26 u-p-b-26 "
				style="border-bottom: 1rpx solid #e9e9e9;">
				<u-avatar :src="itemList.headImg" size="70" :fade="true" duration="450" :lazy-load="true"
					class="u-flex-1" style="margin-right: 20rpx;">
				</u-avatar>
				<p class="u-flex-3">{{itemList.name}}</p>
				<p class="u-font-10" style="color: #bdbdbd;">{{itemList.date}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{
					name:'小张',
					src:'https://s.cn.bing.net/th?id=ODL.8acd6796e431785e9623a48ef791095b&w=146&h=146&c=7&rs=1&qlt=80&pid=RichNav',
					color:'#E5716A'
				},{
					name:'小q',
					color:'#D3D240',
					src:'https://tse1-mm.cn.bing.net/th?id=OIP.OzTCtonjrdsbnZ8tbeYM4AAAAA&w=150&h=160&c=8&rs=1&qlt=90&pid=3.1&rm=2'
				},{
					name:'小星',
					color:'#89CB5B',
					src:'https://s.cn.bing.net/th?id=ODL.7b61652172fdf6eee5d579d645e13bdb&w=146&h=146&c=7&rs=1&qlt=80&pid=RichNav'
				},{
					name:'小王',
					color:'#78DCAE',
					src:'https://tse2-mm.cn.bing.net/th/id/OIP.fPtV12SSVlxTIlLoqm5F2wAAAA?w=176&h=180&c=7&o=5&pid=1.7'
				},{
					name:'小宝',
					color:'#6EABE7',
					src:'https://tse1-mm.cn.bing.net/th/id/OIP.pWnNuLzgsLmnXQj_2w2YzAAAAA?w=180&h=180&c=7&o=5&pid=1.7'
				}],
				background: {
					backgroundColor: '#00a8ff'
				},
				userList: [{
					headImg: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3918800978,3848407993&fm=26&gp=0.jpg',
					name: 'name',
					date: '2021年03月05日'
				}, {
					headImg: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3918800978,3848407993&fm=26&gp=0.jpg',
					name: 'name',
					date: '2021年03月05日'

				}],
				// 文本框内容
				value: '',
				type: 'text',
				border: false
			}
		},
		methods: {
			save() {
				// 添加分组
				this.$apiBasics.addgroup({
					"name": this.value
				}).then((res) => {
					console.log('request success', res);
					this.$u.toast(`添加成功`);
					this.value = '';
					uni.navigateBack({

					})
				}).catch((err) => {
					// this.loading = false;
					this.$u.toast(`未知错误`);
					console.log('request fail', err);
				})

			}
		}
	}
</script>

<style>
	.bg {
		background-color: #f4f4f4;
	}

	.coBg {
		background-color: #ffffff;
	}
</style>
